<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment :: myhead(~{::title},~{::link})">
    <title th:text="#{text.login.title}">System login</title>
    <link rel="stylesheet" th:href="@{/css/login.css}" />
</head>
<body>
<div class="layui-main mylogin" >
    <header class="layui-elip" style="margin-top:10px;margin-bottom: 10px">
        <span style="font-size: 20px;color: #393D49" th:text="#{text.login.title}" th:if="${#strings.isEmpty(message)}">System Login</span>
        <span style="font-size: 20px;color: red" th:text="${message}" th:unless="${#strings.isEmpty(message)}">System Error</span>
    </header>
    <form class="layui-form layui-form-pane" style="padding-left: 20px;padding-right: 20px" method="post" th:action="@{/login}">
        <div class="layui-form-item">
            <label class="layui-form-label" th:text="#{text.login.username.label}">UserName</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required"  th:placeholder="#{text.login.username.placeholder}"
                       autocomplete="off" class="layui-input" th:value="${username}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" th:text="#{text.login.password.label}">Password</label>
            <div class="layui-input-block">
                <input type="password" name="password" required  lay-verify="required" th:placeholder="#{text.login.password.placeholder}"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <!-- CheckCode -->
        <div class="layui-form-item" th:if="${@constantData.codeCheckEnable}">
            <label class="layui-form-label" th:text="#{text.login.checkcode.label}">CheckCode</label>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 140px;">
                    <input type="text" name="checkcode" required  lay-verify="required" th:placeholder="#{text.login.checkcode.placeholder}"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width: 80px;">
                    <img id="codeimg" src="" style="height:38px; width:110px;margin-left: -10px;" th:alt-title="#{text.login.checkcode.alt}">
                </div>
            </div>
        </div>
        <!-- remember me -->
        <!--<div class="layui-form-item" style="margin-bottom: 5px">
            <input type="checkbox" name="rememberMe" title="记住我">
        </div>-->
        <div class="layui-form-item">
            <button type="submit" class="layui-btn layui-btn-normal " ><i class="layui-icon">&#xe605;</i><span th:text="#{text.login.btn.login}"></span></button>
            <button class="layui-btn layui-btn-normal " ><i class="layui-icon">&#x1006;</i><span th:text="#{text.login.btn.clear}"></span></button>
        </div>
        <div class="layui-form-item" style="font-size:10px; padding-top:5px">
            <div th:include="fragment :: footer"></div>
        </div>
    </form>
</div>
<script th:src="@{/js/login.js}"></script>
<script type="text/javascript"></script>
</body>
</html>